<template>
  <view class="containner">
    <u-navbar
      height="50"
      title="参与报名"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>

    <u-cell-group>
      <!-- <u-cell-item  title="项目报价" :arrow="false">
					<view style="display: flex;justify-content: flex-end">
					  <view style="width: 50%" class="text_right">
						<input  v-model="form.acceptPrice" placeholder="请输入报价"  :clearable="false" :inputBorder="false"/>
					  </view>
					</view>
				  </u-cell-item> -->

      <u-cell-item title="联系方式" :arrow="false">
        <view style="display: flex; justify-content: flex-end">
          <view style="width: 50%" class="text_right">
            <input
              v-model="form.contact"
              placeholder="请输入联系方式"
              :clearable="false"
              :inputBorder="false"
            />
          </view>
        </view>
      </u-cell-item>

      <u-cell-item :arrow="false">
        <view
          slot="title"
          style="display: flex; align-items: center"
          @click="showPopup = !showPopup"
        >
          <text>报名费：{{ (price * 0.01).toFixed(2) }}元</text>
          <!-- <u-icon name="../../static/img/gzsm.png" style="margin-left: 8rpx;" size="40rpx"></u-icon> -->
        </view>

        <view style="width: 50%" class="text_right">
          <input disabled v-model="form.amount" :clearable="false" :inputBorder="false" />
        </view>
      </u-cell-item>
      <u-cell-item :arrow="false">
        <view
          slot="title"
          style="display: flex; align-items: center"
          @click="showPopup = !showPopup"
        >
          电子资料<text>（不需要可以不上传）</text>
        </view>
        <view class="" slot="label">
          <u-upload ref="uUpload" :action="uploadURL" :files="form.picUrls"></u-upload>
        </view>
      </u-cell-item>
    </u-cell-group>

    <view class="submit_the_module">
      <view @click="submit">确认提交</view>
    </view>
    <u-popup v-model="showPopup" width="650" border-radius="20" height="650" mode="center">
      <view class="popup-box">
        <h3 style="text-align: center; margin: 20rpx 0">保证金规则</h3>
        <view class="">
          <p>一、具体规则</p>
          <view class="">
            相关描述相关描述相关描述，相关描述相关描述相关描述，相关描述相关描述相关描述，相关描述相关描述相关描述，相关描述相关描述相关描述，
          </view>
        </view>
      </view>
    </u-popup>

    <PayPopup :show="payShow" :payOrderId="payOrderId" :resStatus="resStatus">
      <view class="popup-top"> 报名费 </view>
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ realPay }}
      </p>
    </PayPopup>
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '@/common/config.js'
import PayPopup from '@/components/PayPopup.vue'

export default {
  components: { PayPopup },
  data() {
    return {
      payShow: false,
      resStatus: 3,
      realPay: '',
      price: '',
      accept: false,
      pickupPopup: false,
      checked: false,
      showPopup: false,
      selectMode: 'selector',
      timeStatus: '',
      show: false,
      showTime: false,
      Ranges: [],
      typeEleven: '',
      order_id: '',
      uploadURL: BASE_URL + UP_URL,
      stertTime: '',
      endTime: '',
      joinTime: '',
      form: {
        projectId: '',
        acceptPrice: '500',
        contact: '',
        picUrls: []
      },
      hal: false
    }
  },
  onLoad(e) {
    this.form.projectId = e.id
  },
  onShow() {
    this.$u.get('/app-api/construction/config/get').then((res) => {
      this.price = res.data.supplierEnrollPrice
    })
  },
  onReady() {},
  methods: {
    confirm(row) {
      if (this.selectMode == 'select') {
        this.typeEleven = this.Ranges[row]
        this.form.refund_type_id = this.Ranges[row].id
      } else {
        this.typeEleven = this.Ranges[row]
        this.form.refund_type_id = this.Ranges[row].id
      }
    },

    selectAFunction(value) {
      this.show = true
    },
    onSelect(s) {
      this.selectMode = s
      this.show = true
    },
    checkTime(e) {
      if (e < 3) {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        }
      } else {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: false
        }
      }
      this.timeStatus = e
      this.showTime = true
    },
    confirmTime(e) {
      if (this.timeStatus == 1) {
        this.stertTime = e.year + '-' + e.month + '-' + e.day
      } else if (this.timeStatus == 2) {
        this.endTime = e.year + '-' + e.month + '-' + e.day
      } else {
        this.joinTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
      }
    },
    submit() {
      if (this.halt) {
        return
      }
      this.halt = true
      this.$refs.uUpload.lists.forEach((val) => {
        this.form.picUrls.push(val.response.data)
      })

      // if(!this.form.acceptPrice){
      //   this.$u.toast("保证金不能为空")
      //   return
      // }

      if (!this.form.contact) {
        this.$u.toast('联系方式不能为空')
        return
      }

      this.$u
        .post('/app-api/construction/project-enroll/create', this.form)
        .then((res) => {
          this.$u
            .post('/app-api/construction/deposit-order/enroll-order', { enrollId: res.data })
            .then((res) => {
              // #ifdef APP
              this.payOrderId = res.data.id
              this.realPay = (res.data.price * 0.01).toFixed(2)
              this.payShow = true
              // #endif
              // #ifdef MP-WEIXIN
              this.$u
                .post('/app-api/pay/order/submit', {
                  id: res.data.id,
                  channelExtras: { openid: uni.getStorageSync('tokenInfo').openid },
                  channelCode: 'wx_lite'
                })
                .then((res) => {
                  let { appId, nonceStr, packageValue, paySign, signType, timeStamp } = JSON.parse(
                    res.data.displayContent
                  )
                  uni.requestPayment({
                    provider: 'wxpay',
                    appId,
                    nonceStr,
                    package: packageValue,
                    paySign,
                    signType,
                    timeStamp,
                    success: (res) => {
                      uni.showToast({
                        title: '支付成功',
                        icon: 'none',
                        duration: 2000
                      })
                      setTimeout(() => {
                        uni.navigateBack()
                      }, 800)
                    },
                    fail: (err) => {
                      console.log(err)
                      uni.showToast({
                        title: '支付失败: ' + err,
                        icon: 'none',
                        duration: 2000
                      })
                    }
                  })
                })
              // #endif
            })
        })
        .finally(() => {
          this.halt = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  view {
    width: 96%;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #01b858;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

.from {
  padding: 20rpx;
}

.info-view {
  background-color: #fff;
  font-size: 28rpx;
  color: #606266;
  padding: 28rpx;
}
.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}
.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;
    text {
      color: #2d93fd;
    }
  }
}

.popup-box {
  padding: 20rpx;
}

.popup-box2 {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.popup-top {
  margin: 10rpx;
  text-align: center;
}

.popup-price {
  font-size: 50rpx;
  font-weight: 600;
  padding: 20rpx;
  text-align: center;
}

.pay-method {
  overflow: auto;
  padding: 25rpx 20rpx;
}
.pay-method-left {
  float: left;
  display: flex;
  align-items: center;
}

.pay-method-left image {
  width: 80rpx;
  height: 80rpx;
}

.pay-method-right {
  float: right;
}

.submit-pay {
  width: 700rpx;
  height: 75rpx;
  text-align: center;
  line-height: 75rpx;
  background-color: #0f76bc;
  border-radius: 65rpx;
  color: #ffffff;
  align-self: center;
  font-size: 35rpx;
  margin-top: 25rpx;
}
</style>
